<template>
  <base-group class="series-box" :value="myValue" @add="handleAdd" @remove="handleRemove" :disabled="disabled" :simple-layout="false" :max-item="maxItem">
    <template scope="scope">
      <div class="series-con">
        <el-row :span="24" >
          <el-col :span="3"><span class="series-check">*</span>活动地点：</el-col>
          <el-col :span="8" class="series-area">
            <address-cascader class="input-block"
              :value="scope.item.areas"
              placeholder="请选择省市"
              :grade="2"
              @change="handleChange(scope.index,'areas',$event)"
              />
          </el-col>
          <el-col :span="12">
            <el-input class="input-block"
            v-bind="$props"
            :value="scope.item.address"
            :maxlength="40"
            @change="handleChange(scope.index,'address',$event)"
              placeholder="请输入详细地址"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3"><span class="series-check">*</span>活动时间：</el-col>
          <el-col :span="8">
            <el-date-picker
            v-model="scope.item.activityTime"
            type="daterange"
            :picker-options="pickerOptions0"
            placeholder="选择日期范围"
            :clearable="false"
            >
          </el-date-picker>
          </el-col>
        </el-row>
      </div>
    </template>
  </base-group>
</template>
<script>
  import emitter from 'utils/emitter.js'
  import * as ui from 'l-element'
  import BaseGroup from '@/modules/components/BaseGroup'
  import AddressCascader from '@/modules/components/AddressCascader'
  export default {
    mixins: [emitter],
    components: {
      BaseGroup,
      AddressCascader
    },
    props: {
      ...ui.default.Input.props, // 继承Input的所有属性
      ...BaseGroup.props,
      value: {},
      minlength: {
        type: Number
      },
      maxlength: {
        type: Number
      },
      validateEvent: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      value (value) {
        this.myValue = value
      }
    },
    data () {
      let myValue = this.value
      if (!this.value || this.value.length === 0) {
        myValue = [
          {
            areas: [],
            address: '',
            activityTime: []
          }
        ]
      }
      return {
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() < Date.now()
          }
        },
        myValue
      }
    },
    methods: {
      handleChange (index, name, value) {
        this.myValue[index][name] = value
        this.$emit('change', this.myValue).$emit('input', this.myValue)
        this.triggerVaild()
      },
      triggerVaild () {
        if (this.validateEvent) { // 触发表单校验
          this.dispatch('ElFormItem', 'el.form.change', [this.myValue])
          this.dispatch('ElFormItem', 'el.form.blur', [this.myValue])
        }
      },
      handleAdd (index) {
        this.myValue.push({
          areas: [],
          address: '',
          activityTime: []
        })
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        this.$emit('change', this.myValue).$emit('input', this.myValue)
        this.triggerVaild()
      }
//    startTimeOptions () {
//      disabledDate(time) {
//        return time.getTime() < Date.now() - 8.64e7;
//      }
//    }
    }
  }
</script>

<style lang="scss">
    @import '~styles/var.scss';
  .series-box{
    .el-row+.el-row{
      margin-top: 10px;
    }
    /*margin:30px 0px 30px 40px;*/
    position:relative;
    margin-bottom: 10px;
    .address-box{
      .el-col{
        margin-right:10px;
      }
    }
    .series-close{
      text-align: right;
      padding-right: 10px;
      position:absolute;
      .el-button--text{
        color:gray;
        font-size:12px;
        &:hover{
          color:#00bb90;
        }
      }
    }
    .series-con{
      margin-bottom:10px;
      .el-date-editor--daterange{
        width:100%;
      }
      .el-col-3{
        width:90px;
      }
      .series-area{
        margin-right: 10px;
      }
      .series-check{
        color:red;
        margin-right: 5px;
      }
    }
    .series-btn-box{
      margin-top: 20px;
      text-align: right;
      .el-button{
        margin:0px;
      }
    }
  }
</style>
